<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import HuBeiMap from '../../assets/map/HuBei.json'

export default {
  name: 'three',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el)

      echarts.registerMap('HuBei', HuBeiMap);
      this.setOptions(this.chartData)
    },
    setOptions ({ dataValue } = {}) {
      this.chart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a} <br/><br/> {b} : {c}',
          extraCssText:'width: 512px; height: 100px;font-size: 36px; font-family: Arial;font-weight: bold;',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            color: '#000',
            fontsize: 60
          }
        },
        visualMap: {
          min: 0,
          //最大值
          max: 300,
          top: '50%',
          left:'5%',
          // bottom: '2%',
          // left: 'left',
          text: ['Low','High'],
          realtime: false,
          calculable: true,
          inRange: {
            color: [
              'rgb(246,246,228)',
              'rgb(0,66,147)']
          }
          //backgroundColor: "rgba(11,85,142,0.85)",
        },
        series: [
          {
            name: '湖北银行网店分布数据',
            type: 'map',
            map: 'HuBei',

            top: '15%',
            zoom: '1.1',
            label: {
              show: true,
              color: '#fff',
              fontSize: '36'
            },
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontSize: '36'
                // fontWeight: 'bold'
              }
            },
            data: [
              { name: '武汉市', value: 256 },
              { name: '黄石市', value: 196 },
              { name: '十堰市', value: 75 },
              { name: '宜昌市', value: 141 },
              { name: '襄阳市', value: 193 },
              { name: '鄂州市', value: 193 },
              { name: '荆门市', value: 193 },
              { name: '孝感市', value: 193 },
              { name: '荆州市', value: 193 },
              { name: '黄冈市', value: 193 },
              { name: '咸宁市', value: 193 },
              { name: '随州市', value: 193 },
              { name: '恩施土家族苗族自治州', value: 193 },
              { name: '仙桃市', value: 193 },
              { name: '潜江市', value: 193 },
              { name: '天门市', value: 193 },
              { name: '神农架林区', value: 193 }
            ]
          }
        ]
      })
    }
  }
}
</script>
